<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta http-equiv="Cache-Control" content="no-store"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <meta name="viewport2" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>新闻标题采样</title>
    <meta charset="utf-8">
    <link href="css/cropper.css" rel="stylesheet">

    <link rel="shortcut icon" href="http://static.lego.iqiyi.com/lego.png" type="image/x-icon">
    <link media="all" type="text/css" href="./css/ui.css?v=2014122229711" rel="stylesheet">
    <link media="all" type="text/css" href="./css/pps.css?v=2014122229711" rel="stylesheet">

    <script src="js/core.js" type="text/javascript"></script>
    <script src="js/append_header_footer.js" type="text/javascript"></script>
    <script src="js/cropper.js" type="text/javascript"></script>

</head>
<style type="text/css">
    .my-img {

    }

    .select-img {

    }
    .img-content{padding-top: 5px;width:1500px;}
    .hide{display: none}
    .absolute{position:absolute;color: white;right:412px;top:20px;z-index: 100;}
    .img-data{color: white;margin:0 auto;width:900px;height:20px;text-align:center;}
    .img-data li{display:inline;padding:0;margin-right:10px}
    .f-left{float:left}
    .img-container {float:left;margin: 0 auto;width:1480px;}
    .rb{overflow-y:scroll;padding-left:5px;border:1px solid #B2B2B2;background-color:#888;}
    .right{margin-top:0px;}
    .relative{position:relative}

    .img-container-ocr{height:250px;float:left;margin-right: 10px;}
    .img-ocr{height:200px;margin-bottom: 10px;margin-right: 10px;text-align:center;display:table-cell;vertical-align:middle;}
    .img-ocr-txt{height:30px;float:left;}
    .ocr-label{color: white;float:left;font-size: 18px;padding-top:3px;}

    .ocr-info{text-align:right;float:right}
    .control-group span{margin-right: 10px; color: #0099ff}
</style>
<body>
<header></header>
<div class="wrapper wrapper-video">
    <nav>
        <ul class="breadcrumb">
            <li>样本采集<span class="divider">&gt;</span></li>
            <li>新闻标题采样</li>
        </ul>
    </nav>
    <form class="form-horizontal video-edit-form" role=form>
        <div class="form-container" id="sportContainer">
            <div class="container container-album">
                <div class="control-group" style="font-weight:bold">
                    新闻名称：<span name="news_name"></span>
                    专辑名称：<span name="album_name"></span>
                    专辑ID：<span name="album_id"></span>
                    奇谱ID：<span name="qipu_id"></span>
                    频道：<span name="channel"></span>
                </div>
            </div>

            <div class="panel panel-default ">
                <div class="panel-body">
                    <ul class="nav nav-tabs" role="tablist" style="font-size:15px;">
                        <li role="presentation" class="active">
                            <a href="#ocrLoc" role="tab" data-toggle="tab" aria-controls="ocrLoc" aria-expanded="false">标题定位</a>
                        </li>
                        <li role="presentation" class="">
                            <a href="#ocrTxt" role="tab" data-toggle="tab" aria-controls="ocrTxt" aria-expanded="false">标题文本采样</a>
                        </li>
                        <li id="ocrLoc-info" name="ocrInfo" style="text-align:left;float:right;display:block">
                            <div>已定位：<span id="locatedTotal"></span>个标题</div>
                            <div>待文本采样：<span id="toResampleTotal"></span>个标题</div>
                        </li>
                        <li id="ocrTxt-info" name="ocrInfo" style="text-align:right;float:right;display:none">
                            <div>本次标注：<span id="userTotal"></span>个标题</div>
                            <div>共标注：<span id="allTotal"></span>个标题</div>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane fade active in" id="ocrLoc" aria-labelledby="ocrLoc-tab">
                            <div class="rb right img-content" id="makedImgTitle" style="height: 700px">

                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="ocrTxt" aria-labelledby="ocrTxt-tab">
                            <div class="rb right img-content" id="makedImgOcr" style="height: 700px">

                            </div>
                        </div>
                    </div>
                    <ul style="font-size:15px;font-weight:bold;text-align: right;float:right;">
                        <li id="ocrLoc-info-foot" class="ocr-info-foot" style="display: block;">
                            <div>本页<span id="ocrLoc-pageSize"></span>张图像 剩余<span id="ocrLoc-left"></span>张图像</div>
                        </li>
                        <li id="ocrTxt-info-foot" class="ocr-info-foot" style="display: none">
                            <div>本页<span id="ocrTxt-pageSize"></span>张图像 剩余<span id="ocrTxt-left"></span>张图像</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="module-container">
            <div class="form-actions" style="text-align:center">
                <button id="ocrLoc-btn" class="btn btn-large btn-primary" type="button" name="btn_submit">OCR识别</button>
                <button id="ocrTxt-btn" class="btn btn-large btn-primary hide" type="button" name="btn_submit">提交</button>
                <button class="btn btn-large" type="button" name="btn_goback">退出</button>
            </div>
        </div>
    </form>

</div>

</body>
<script type="text/javascript">
var VOD = {},
    Specimen = {};

var ocrLocData = [],
    ocrTxtData = [];

var ocrLocUpdate = 0,       //标题定位接口偏移量
    queryOcrLocStart = 0,   //标题定位接口初始值
    ocrTxtUpdate = 0,        //标题文本采样接口偏移量
    queryOcrTxtStart = 0,   //标题文本采样接口初始值
    pageSize = 20;           //一页显示的数量

var userTotal = 0;  //标题文本采样，用户档次提交数量

VOD.Util = {
    dl_click:function(url, data, callback){
		try
		{
            var options = {
                    url: url,
                    dataType: 'json',
                    data: data,
                    method: 'get',
                    success: function(data) {
                        callback.call(this, data);
                    },
                    error: function(data) {
                        callback.call(this, data);
                    }
                };
			$.ajax(options);
		}
		catch(e)
		{
		}
	}
}

Specimen.urlConfig = (function () {
    //http://shotocrdump.qiyi.domain:8282/",
    var host = auth.dev() ? "http://10.110.48.80:8282/" : "http://10.77.47.63:8282/";
    var queryOcrLoc = host + "query_ocr_loc";
    var updateOcrLoc = host + "update_ocr_loc";
    var queryOcrTxt = host + "query_ocr_txt";
    var updateOcrTxt = host + "update_ocr_txt";

    return {
        queryOcrLoc: queryOcrLoc,
        updateOcrLoc: updateOcrLoc,
        queryOcrTxt: queryOcrTxt,
        updateOcrTxt: updateOcrTxt
    }
})()

Specimen.Action = {
    queryOcrLocRun: function() {
        //初始化
        var $makedImgTitle = $('#makedImgTitle');
        $makedImgTitle.html("");

        //获取标题定位数据，渲染界面以及事件绑定
        if (queryStringObj['album_id'] != null) {
            var $makedImgTitle = $('#makedImgTitle');
            var ocrLocStart = queryOcrLocStart,ocrLocEnd = ocrLocStart + pageSize - 1;
            var queryOcrLocParam = {'album_id' : queryStringObj['album_id'], 'qipu_id' : queryStringObj['qipu_id'], 'start' : ocrLocStart, 'end' : ocrLocEnd};
            VOD.Util.dl_click(Specimen.urlConfig.queryOcrLoc, queryOcrLocParam, function(data){
                var imgContentWidth = $('#makedImgTitle').width();
                $('#ocrLoc-pageSize').text(0);
                $('#ocrLoc-left').text(0);
                if (data != null) {
                    var responseData = data.data;
                    var locatedTotal = responseData.located_total,
                        toResampleTotal = responseData.to_resample_total,
                        total = responseData.total,
                        processedTotal = responseData.processed_total;

                    ocrLocUpdate = responseData.update;

                    $('#locatedTotal').text(locatedTotal);
                    $('#toResampleTotal').text(toResampleTotal);

                    var ocrLocHtml="";

                    if (responseData.result != null) {
                        var length = responseData.result.length;
                        $('#ocrLoc-pageSize').text(length);
                        $('#ocrLoc-left').text(total - processedTotal - length);
                        //初始化数组
                        ocrLocData=[];
                        $.each(responseData.result,function(i,v){
                            var path = v.pic_addr,
                                img = v.pic_path + path + '.jpg';

                            ocrLocData.push(path);
                            ocrLocHtml += '<div class="img-container relative" style="" status="-1" id="cate-' + i + '">'
                                          + '<div id="disable-' + i + '" data-key="' + i + '" class="absolute disable-crop"><a class="btn btn-danger">关闭</a></div>'
                                          + '<div id="enable-' + i + '" data-key="' + i + '" class="absolute enable-crop hide"><a class="btn btn-info">恢复</a></div>'
                                          + '<img id="img-' + i + '" src="' + img + '" onload="Specimen.Action.initCropImg(' + i + ');">'
                                          + '<ul id="img-data-' + i + '" class="img-data" style="">'
                                          + '<li>X:<span id="dataX-' + i + '"></span>px</li>'
                                          + '<li>Y:<span id="dataY-' + i + '"></span>px</li>'
                                          + '<li>Width:<span id="dataWidth-' + i + '"></span>px</li>'
                                          + '<li>Height:<span id="dataHeight-' + i + '"></span>px</li>'
                                          + '</ul></div>'
                        });
                        $makedImgTitle.html(ocrLocHtml);

                        $('.disable-crop').on('click', function (){
                            var key = $(this).attr('data-key');
                            $('#cate-' + key).find('.cropper-crop').attr('class', 'cropper-drag-box cropper-crop cropper-modal');
                            $('#img-' + key).cropper('clear').cropper('disable');
                            $(this).parent().attr('status', 0);
                            $('#disable-' + key).attr('class', 'absolute disable-crop hide');
                            $('#enable-' + key).attr('class', 'absolute enable-crop');
                        });
                        $('.enable-crop').on('click', function (){
                            var key = $(this).attr('data-key');
                            $('#cate-' + key).find('.cropper-crop').attr('class', 'cropper-drag-box cropper-crop');
                            $('#img-' + key).cropper('enable');
                            $(this).parent().attr('status', -1);
                            $('#disable-' + key).attr('class', 'absolute disable-crop');
                            $('#enable-' + key).attr('class', 'absolute enable-crop hide');
                        });
                    }
                } else {
                    alert("标题定位查询出错！");
                }
            });
        } else {
            $('#locatedTotal').text(0);
            $('#toResampleTotal').text(0);
        }
    },

    initCropImg: function(i) {
        var $dataX = $('#dataX-' + i),
            $dataY = $('#dataY-' + i),
            $dataHeight = $('#dataHeight-' + i),
            $dataWidth = $('#dataWidth-' + i),

            options = {
              guides: false,
              highlight: false,
              background: false,
              autoCrop: false,
              zoomable: false,
              touchDragZoom: false,
              mouseWheelZoom: false,
              aspectRatio: NaN,
              crop: function (data) {
                $dataX.text(Math.round(data.x));
                $dataY.text(Math.round(data.y));
                $dataHeight.text(Math.round(data.height));
                $dataWidth.text(Math.round(data.width));
                $('#cate-' + i).attr('status' , 1);
              }
            };
        $('#img-' + i).cropper(options);
    },

    queryOcrTxtRun: function() {
        //初始化
        var $makedImgOcr = $('#makedImgOcr');
        $makedImgOcr.html("");

        //获取标题文本采样数据，渲染界面以及事件绑定
        if (queryStringObj['album_id'] != null) {
            $('#userTotal').text(0);
            $('#allTotal').text(0);
            var ocrTxtStart = queryOcrTxtStart,ocrTxtEnd = ocrTxtStart + pageSize - 1;
            var uid = $('input[name=hidden_uid]').val();
            var queryOcrTxtParam = {'album_id' : queryStringObj['album_id'], 'qipu_id' : queryStringObj['qipu_id'], 'user_id' : uid, 'start' : ocrTxtStart, 'end' : ocrTxtEnd};
            VOD.Util.dl_click(Specimen.urlConfig.queryOcrTxt, queryOcrTxtParam, function(data){
                var imgContentWidth = $('#makedImgOcr').width();
                $('#ocrTxt-pageSize').text(0);
                $('#ocrTxt-left').text(0);
                if (data != null) {
                    var responseData = data.data;
                    var allTotal = responseData.all_total,   //共标注
                        ocrTxtLeft = responseData.left_total;   //剩余未标注的数量

                    ocrTxtUpdate = responseData.update;

                    $('#userTotal').text(userTotal);
                    $('#allTotal').text(allTotal);
                    $('#ocrTxt-left').text(ocrTxtLeft);

                    var ocrTxtHtml="";
                    if (responseData.result != null) {
                        var length = responseData.result.length;
                        $('#ocrTxt-pageSize').text(length);
                        //初始化数组
                        ocrTxtData = [];
                        $.each(responseData.result,function(i,v){
                            var path = v.snapshot_addr,
                                img = v.pic_path + path + '.jpg',
                                ocrTitle = v.ocr_org;
                            ocrTxtData.push(path);
                            ocrTxtHtml += '<div class="img-container-ocr" id="ocr-' + i +'">'
                                        + '<div class="img-ocr"><img id="img-ocr-' + i + '" src="' + img + '"></div>'
                                        + '<div id="ocr-title" class=""><label class="ocr-label" for="">标题：</label>'
                                        + '<input id="ocr-title-' + i + '" class="img-ocr-txt" type="text" name="ocrTitle" value="' + ocrTitle + '" />'
                                        + '</div></div>';
                        });
                        $makedImgOcr.html(ocrTxtHtml);
                        $('.img-container-ocr').width((imgContentWidth - 40) / 2);
                        $('.img-ocr').width((imgContentWidth - 40) / 2);
                        $('.ocr-title').width((imgContentWidth - 40) / 2);
                        $('.img-ocr-txt').width((imgContentWidth - 40) / 2 - 70);
                        $('.img-ocr-txt').bind('propertychange input', function() {
                            var textValue = $(this).val();
                            var length = Com.string.getStrLength(textValue);
                            if (length > 60 * 2) {
                                $(this).val(Com.string.substrCn(textValue, 60));
                            }
                        });
                    }
                }
            });
        }
    },
}

//取浏览器参数
url = decodeURI(window.location.href);
var urlIndex = url.lastIndexOf("#");
if (urlIndex != -1) {
    url = url.substring(0, urlIndex);
}
var queryStringArr = url.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+","g")),
    queryStringObj = {},
    itemArr = [];

try{
    for(var i = 0; i < queryStringArr.length; i++){
        itemArr = queryStringArr[i].substring(1).split("=");
        queryStringObj[itemArr[0]] = itemArr[1];
    }
}catch(e){
    //alert("URL地址参数有误，请确认！");
    //live.tips("error","URL地址参数有误，请确认！");
    console.log(e.message);
}

(function () {
    $('span[name=news_name]').text(queryStringObj['news_name']);
    $('span[name=album_name]').text(queryStringObj['album_name']);
    $('span[name=album_id]').text(queryStringObj['album_id']);
    $('span[name=qipu_id]').text(queryStringObj['qipu_id']);
    $('span[name=channel]').text(queryStringObj['channel']);

    Specimen.Action.queryOcrLocRun();

    $('a[role=tab]').on('click', function(){
        $('li[role=presentation]').each(function(i){
            $(this).attr('class','');
        });
        $(this).parent().attr('class', 'active');

        $('div[role=tabpanel]').each(function(i){
            $(this).attr('class', 'tab-pane fade');
        });
        var tabpanel = $(this).attr('aria-controls');
        $('#' + tabpanel).attr('class','tab-pane fade active in');
        $('button[name=btn_submit]').attr('class', 'btn btn-large btn-primary hide');
        $('#' + tabpanel + '-btn').attr('class', 'btn btn-large btn-primary');

        $('li[name=ocrInfo]').css('display', 'none');
        $('#' + tabpanel + '-info').css('display', 'block');

        $('.ocr-info-foot').css('display', 'none');
        $('#' + tabpanel + '-info-foot').css('display', 'block');

        if (tabpanel === "ocrTxt") {
            Specimen.Action.queryOcrTxtRun();
        }
    });

    $('#ocrLoc-btn').on('click', function(){
        queryOcrLocStart = queryOcrLocStart + ocrLocUpdate + pageSize;
        var flag = true;
        var $ocrContainer = $('.img-container');
        var location = [];
        $ocrContainer.each(function(i) {
            var status = $(this).attr('status');
            var x = $('#dataX-' + i).text(),
                y = $('#dataY-' + i).text(),
                height = $('#dataHeight-' + i).text(),
                width = $('#dataWidth-' + i).text(),
                img = ocrLocData[i];

            if (status == -1) {
                flag = false;
                return false;
            } else if(status == 0) {

            } else if(status == 1) {
                if (height <= 0 || width <= 0) {
                    flag = false;
                    return false;
                }
            }

            location.push(status + '|' + img + '|' + x + '|' + y + '|' + width + '|' + height);
        });

        if (flag) {
            if (location.length > 0) {
                //ocr提交
                var param = {'album_id' : queryStringObj['album_id'], 'qipu_id' : queryStringObj['qipu_id']};

                for (var item in location) {
                    var locationTemp = "{\"location" + item + "\" : \"" + location[item] + "\"}";
                    param = $.extend(true,JSON.parse(locationTemp) , param);
                }
                VOD.Util.dl_click(Specimen.urlConfig.updateOcrLoc, param, function(data){
                    if (data != null) {
                        if (data.code == "A00000") {
                            Specimen.Action.queryOcrLocRun();
                        } else {
                            alert("OCR识别错误提示：" + data.msg);
                            Specimen.Action.queryOcrLocRun();
                        }
                    } else {
                        alert("OCR识别出错！");
                    }
                });
            } else {
                alert("标题定位数据为空，无法提交！");
            }
        } else {
            //提示不能提交
            alert("标题定位没有全部完成，不允许提交！");
        }
    });

    $('#ocrTxt-btn').on('click', function(){
        queryOcrTxtStart = queryOcrTxtStart + ocrTxtUpdate + pageSize;
        var $ocrContainer = $('.img-container-ocr');
        var ocr = [];

        $ocrContainer.each(function(i) {
            var ocrTitle = $(this).find('input[name=ocrTitle]').val(),
                img = ocrTxtData[i];

            ocr.push(img + '|' + ocrTitle);
        });

        if (ocr.length <= 0) {
            alert("标题文本采样数据为空，无法提交！");
            return;
        }
        var param = {'album_id' : queryStringObj['album_id'], 'qipu_id' : queryStringObj['qipu_id'], 'user_id' : $('input[name=hidden_uid]').val(), 'news_name' : queryStringObj['news_name']}
        for (var item in ocr) {
            var ocrTemp = "{\"ocr" + item + "\" : \"" + ocr[item] + "\"}";
            param = $.extend(true,JSON.parse(ocrTemp),param);
        }
        VOD.Util.dl_click(Specimen.urlConfig.updateOcrTxt, param, function(data){
            if (data != null) {
                if (data.code == "A00000") {
                    userTotal += ocr.length;
                    $('#userTotal').text(userTotal);
                    Specimen.Action.queryOcrTxtRun();
                } else {
                    alert("提交错误提示：" + data.msg);
                    Specimen.Action.queryOcrTxtRun();
                }
            } else {
                alert("提交出错！");
            }
        });
    });

    $('button[name=btn_goback]').on('click', function(){
        if (confirm("是否确定退出？")) {
            window.opener=null;
            window.open('','_self');
            window.close();
        }
    });
}());
</script>
<html>
